<template>
  <div class="course-section">
    <!-- 阶段列表 -->
    <el-card>
      <template
        #header
        class="card-header"
      >
        {{ course.courseName }}
        <el-button
          type="primary"
          @click="handleShowAddSection"
        >
          添加阶段
        </el-button>
      </template>
      <el-tree
        v-loading="isLoading"
        :data="sections"
        :props="defaultProps"
        draggable
        :allow-drop="handleAllowDrop"
        @node-drop="handleSort"
      >
        <template
          #default="{ node, data }"
          class="inner"
        >
          <span>{{ node.label }}</span>
          <!-- section -->
          <span
            v-if="data.sectionName"
            class="actions"
          >
            <el-button @click.stop="handleEditSectionShow(data)">编辑</el-button>
            <el-button
              type="primary"
              @click.stop="handleShowAddLesson(data)"
            >添加课时</el-button>
            <el-select
              v-model="data.status"
              class="select-status"
              placeholder="请选择"
              @change="handleSectionStatusChange(data)"
            >
              <el-option
                label="已隐藏"
                :value="0"
              />
              <el-option
                label="待更新"
                :value="1"
              />
              <el-option
                label="已更新"
                :value="2"
              />
            </el-select>
          </span>
          <!-- lession -->
          <span
            v-else
            class="actions"
          >
            <el-button @click="handleShowEditLesson(data, node.parent.data)">编辑</el-button>
            <el-button
              type="success"
              @click="$router.push({
                name: 'course-video',
                params: {
                  courseId
                },
                query: {
                  sectionId: node.parent.id,
                  lessonId: data.id,
                }
              })"
            >上传视频</el-button>
            <el-select
              v-model="data.status"
              class="select-status"
              placeholder="请选择"
              @change="handleLessonStatusChange(data)"
            >
              <el-option
                label="已隐藏"
                :value="0"
              />
              <el-option
                label="待更新"
                :value="1"
              />
              <el-option
                label="已更新"
                :value="2"
              />
            </el-select>
          </span>
        </template>
      </el-tree>
    </el-card>
    <!-- /阶段列表 -->

    <!-- 添加阶段 -->
    <el-dialog
      v-model="isAddSectionShow"
      title="添加课程阶段"
    >
      <el-form
        ref="section-form"
        :model="section"
        label-width="70px"
      >
        <el-form-item label="课程名称">
          <el-input
            v-model="course.courseName"
            autocomplete="off"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="章节名称"
          prop="sectionName"
        >
          <el-input
            v-model="section.sectionName"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="章节描述"
          prop="description"
        >
          <el-input
            v-model="section.description"
            type="textarea"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="章节排序"
          prop="orderNum"
        >
          <el-input-number v-model="section.orderNum" />
        </el-form-item>
      </el-form>
      <template
        #footer
        class="dialog-footer"
      >
        <el-button @click="isAddSectionShow = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleAddSection"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
    <!-- /添加阶段 -->

    <!-- 添加课时 -->
    <el-dialog
      v-model="isAddLessonShow"
      title="添加课时"
    >
      <el-form
        ref="lesson-form"
        :model="lesson"
        label-width="100px"
      >
        <el-form-item label="课程名称">
          <el-input
            v-model="course.courseName"
            autocomplete="off"
            disabled
          />
        </el-form-item>
        <el-form-item
          label="章节名称"
          prop="sectionName"
        >
          <el-input
            :value="lesson.sectionName"
            disabled
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="课时名称"
          prop="sectionName"
        >
          <el-input
            v-model="lesson.theme"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="时长"
          prop="description"
        >
          <el-input
            v-model.number="lesson.duration"
            type="number"
            autocomplete="off"
          >
            <template #append>
              分钟
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="是否开放试听"
          prop="description"
        >
          <el-switch v-model="lesson.isFree" />
        </el-form-item>
        <el-form-item
          label="课时排序"
          prop="description"
        >
          <el-input-number v-model="lesson.orderNum" />
        </el-form-item>
      </el-form>
      <template
        #footer
        class="dialog-footer"
      >
        <el-button @click="isAddLessonShow = false">
          取 消
        </el-button>
        <el-button
          type="primary"
          @click="handleAddLesson"
        >
          确 定
        </el-button>
      </template>
    </el-dialog>
    <!-- /添加课时 -->
  </div>
</template>

<script lang="ts">
import { DefineComponent, defineComponent } from 'vue'
import {
  getSectionAndLesson,
  saveOrUpdateSection,
  getSectionById
} from '/@/services/course-section'
import { getCourseById } from '/@/services/course'
import { saveOrUpdateLesson } from '/@/services/course-lesson'

export default defineComponent({
  name: 'CourseSection',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    const defaultProps = {
      children: 'lessonDTOS',
      label (data: any) {
        return data.sectionName || data.theme
      }
    }

    const section = {
      courseId: this.courseId,
      sectionName: '',
      description: '',
      orderNum: 0,
      status: 0
    }

    const lesson = {
      courseId: this.courseId,
      sectionId: undefined,
      sectionName: '',
      theme: '',
      duration: 0,
      isFree: false,
      orderNum: 0,
      status: 0
    }

    return {
      course: {},
      sections: [],
      defaultProps,
      isAddSectionShow: false,
      section,
      isAddLessonShow: false,
      lesson,
      isLoading: false
    }
  },

  created () {
    this.loadSections()
    this.loadCourse()
  },

  methods: {
    async loadCourse () {
      const { data } = await getCourseById(this.courseId)
      this.course = data.data
    },

    async loadSections () {
      const { data } = await getSectionAndLesson(this.courseId)
      this.sections = data.data
    },

    handleShowAddSection () {
      this.section = { // 防止数据还是编辑时获取的数据
        courseId: this.courseId,
        sectionName: '',
        description: '',
        orderNum: 0,
        status: 0
      }
      this.isAddSectionShow = true
    },

    async handleAddSection () {
      await saveOrUpdateSection(this.section)
      this.loadSections()
      this.isAddSectionShow = false
      ;(this.$refs['section-form'] as DefineComponent).resetFields()
      this.$message.success('操作成功')
    },

    async handleEditSectionShow (section: any) {
      const { data } = await getSectionById(section.id)
      this.section = data.data
      this.isAddSectionShow = true
    },

    async handleSectionStatusChange (section: any) {
      await saveOrUpdateSection(section)
      this.$message.success('操作成功')
    },

    async handleLessonStatusChange (lesson: any) {
      await saveOrUpdateLesson(lesson)
      this.$message.success('操作成功')
    },

    handleShowAddLesson (data: any) {
      console.log(data)
      this.lesson = {
        sectionName: data.sectionName,
        sectionId: data.id,
        courseId: this.courseId,
        theme: '',
        duration: 0,
        isFree: false,
        orderNum: 0,
        status: 0
      }
      this.isAddLessonShow = true
    },

    async handleAddLesson () {
      await saveOrUpdateLesson(this.lesson)
      this.$message.success('操作成功')
      this.loadSections()
      this.isAddLessonShow = false
    },

    handleShowEditLesson (lesson: any, section: any) {
      this.lesson = lesson
      this.lesson.sectionName = section.sectionName
      this.isAddLessonShow = true
    },

    handleAllowDrop (draggingNode: any, dropNode: any, type: any) {
      // draggingNode 拖动的节点
      // dropNode 放置的目标节点
      // type：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
      return draggingNode.data.sectionId === dropNode.data.sectionId && type !== 'inner'
    },

    async handleSort (dragNode: any, dropNode: any) {
      this.isLoading = true
      try {
        await Promise.all(dropNode.parent.childNodes.map((item: any, index: number) => {
          if (dragNode.data.lessonDTOS) {
            // 阶段
            return saveOrUpdateSection({
              id: item.data.id,
              orderNum: index + 1
            })
          } else {
            // 课时
            return saveOrUpdateLesson({
              id: item.data.id,
              orderNum: index + 1
            })
          }
        }))
        this.$message.success('排序成功')
      } catch (err) {
        console.log(err)
        this.$message.error('排序失败')
      }
      this.isLoading = false
    }
  }
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inner {
  flex: 1;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
}

::v-deep .el-tree-node__content {
  height: auto;
}

.select-status {
  max-width: 100px;
  margin-left: 8px;
}
</style>
